<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="elements/core-doc-page.html">
<link rel="import" href="elements/core-doc-toc.html">
<link rel="import" href="../core-icon/core-icon.html">

<!--
Displays formatted source documentation scraped from input urls.

Documentation can be encoded into html comments (&lt;!-- ... --&gt;) or using JsDoc notation (/&#42;&#42; ... &#42;/).

When using JsDoc notation, remember that the left-margin includes an asterisk and a single space.
This is important for markdown constructs that count spaces. Code blocks for example, must be
five spaces from the first asterisk.

## Markdown

Markdown format is supported.

### Links

Arbitrary links can be encoded using [standard markdown format](http://daringfireball.net/projects/markdown/syntax). 
[GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown) is also supported.

Links to other topics can be made with hash-links [core-doc-viewer](#core-doc-viewer).

### Code

Example

    Four space indents indicate code blocks.
    
    <code>blocks are syntax highlighted</code>
    
    <script>
      while(true) {
        javascript('is highlighted also');
      }
    </script>

### Blockquote

 > Blockquote is supported for long text that needs to wrap with a common left side indent.
 > Blockquote is supported for long text that needs to wrap with a common left side indent.  

### Lists
 
1.  enumerated
1.  lists
 
Use - or + for bullet points:
 
- bullet
- lists

### Tables

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

### HTML

Arbitrary HTML is also supported

<input><button>Button</button><hr/>

@class core-doc-viewer
@homepage github.io
-->

<polymer-element name="core-doc-viewer" attributes="sources route url" horizontal layout>

  <template>

    <style>

      core-doc-toc {
        display: none;
        width: 332px;
        overflow-x: hidden;
      }

    </style>

    <context-free-parser url="{{url}}" on-data-ready="{{parserDataReady}}"></context-free-parser>

    <template repeat="{{sources}}">
      <context-free-parser url="{{}}" on-data-ready="{{parserDataReady}}"></context-free-parser>
    </template>

    <core-doc-toc id="toc" data="{{classes}}" selected="{{selected}}"></core-doc-toc>
    <core-doc-page flex data="{{data}}"></core-doc-page>

  </template>

  <script>

    Polymer('core-doc-viewer', {
      /**
       * A single file to parse for docs
       *
       * @attribute url
       * @type String
       * @default ''
       */

      /**
       * Class documentation extracted from the parser
       *
       * @property classes
       * @type Array
       * @default []
       */
      classes: [],

      /**
       * Files to parse for docs
       *
       * @attribute sources
       * @type Array
       * @default []
       */
      sources: [],

      ready: function() {
        window.addEventListener('hashchange', this.parseLocationHash.bind(this));
        this.parseLocationHash();
      },

      parseLocationHash: function() {
        this.route = window.location.hash.slice(1);
      },

      routeChanged: function() {
        this.validateRoute();
      },

      validateRoute: function() {
        if (this.route) {
          this.classes.some(function(c) {
            // The URL fragment might be just a class name,
            // or it might be a class name followed by a '.' and then
            // a section of the page.
            // We want to match on class names here, so split on '.'.
            // E.g.: 'core-ajax.properties.xhrArgs' -> 'core-ajax'
            //       'core-xhr' -> 'core-xhr'
            if (c.name === this.route.split('.')[0]) {
              this.data = c;
              this.route = '';
              return;
            }
          }, this);
        }
      },

      selectedChanged: function() { 
        this.data = this.classes[this.selected];
      },

      parserDataReady: function(event) {
        this.assimilateData(event.target.data);
      },

      assimilateData: function(data) {
        this.classes = this.classes.concat(data.classes);
        this.classes.sort(function(a, b) {
          var na = a && a.name.toLowerCase(), nb = b && b.name.toLowerCase();
          return (na < nb) ? -1 : (na == nb) ? 0 : 1;
        });
        if (!this.data && !this.route && this.classes.length) {
          this.data = this.classes[0];
        }
        if (this.classes.length > 1) {
          this.$.toc.style.display = 'block';
        }
        this.validateRoute();
      }

    });

  </script>

</polymer-element>
